<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav>
        <ul style="display: flex; justify-content: space-between;">
            <div style="display: flex; justify-content: flex-start; gap: 20px;">
                <li><a href="{{ url_for('views.home') }}">首页</a></li>
                <li><a href="{{ url_for('views.about') }}">关于</a></li>
                <!-- 用户管理菜单项将根据用户权限动态显示 -->
                <li id="userManagementMenuItem" style="display: none;"><a href="{{ url_for('views.users') }}">用户管理</a></li>
            </div>
            <div>
                <li id="authSection">
                    <!-- 登录状态将通过JavaScript动态填充 -->
                </li>
            </div>
        </ul>
    </nav>
    
    <main>
        <h1>{{ message }}</h1>
        <p>这是一个简单的Flask应用</p>
        <button onclick="showMessage()">点击我</button>
    </main>
    
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script>
        // 页面加载时检查登录状态
        window.addEventListener('DOMContentLoaded', function() {
            fetch('/api/users/check-login')
                .then(response => response.json())
                .then(data => {
                    const authSection = document.getElementById('authSection');
                    if (data.code === 0 && data.data.logged_in) {
                        // 检查是否是管理员
                        fetch(`/api/users/${data.data.user.id}`)
                            .then(response => response.json())
                            .then(userData => {
                                if (userData.code === 0 && userData.data.is_admin) {
                                    // 显示用户管理菜单项
                                    document.getElementById('userManagementMenuItem').style.display = 'list-item';
                                }
                                
                                authSection.innerHTML = `
                                    <span>欢迎, ${data.data.user.name} | 
                                    <a href="#" onclick="logout()">登出</a></span>
                                `;
                            });
                    } else {
                        authSection.innerHTML = `
                            <a href="{{ url_for('views.login') }}">登录</a>
                        `;
                    }
                })
                .catch(error => {
                    console.error('检查登录状态失败:', error);
                });
        });
        
        function logout() {
            fetch('/api/users/logout', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    window.location.href = '/login';
                }
            })
            .catch(error => {
                console.error('登出失败:', error);
            });
        }
    </script>
</body>
</html>